<template>
	<view class="mian">
		<uni-forms ref="baseForm" :modelValue="baseFormData" label-width="80">
			<view class="uni_form">
				<uni-forms-item label="地址区域">
					<view class="addressListStr_type" @click="showPicker">
						<view :class="addressListStr||'tip'">
							{{addressListStr||'请选择'}}
						</view>
						<uni-icons type="down" size="14" class="icon_btn" color="rgb(153, 153, 153)"></uni-icons>
					</view>
				</uni-forms-item>
			</view>
		</uni-forms>
		<view class="btn_word">
			<button type="primary" class="btn_bor" @click="onSave">保存</button>
		</view>
		<view class="tree-picker">
			<ba-tree-picker ref="treePicker" :multiple='true' @select-change="selectChange" title="选择城市"
				:localdata="listData" valueKey="code" textKey="name" childrenKey="children" />
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,onMounted
	} from 'vue';
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import apiAddress from '@/util/network_api/address.js';
	import apiNetwork from '@/util/network_api/network.js';
		import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
	const baseFormData = ref({
		"area": "",
		"city": "",
		"id": null,
		"province": "",
		"town": "",
	})
	const listData = ref([])
	const treePicker = ref()
	const addressListStr = ref('')
	const addressValue = ref()
	const addressRef = ref() //地址组件元素
	// 通过onLoad接收数据
	onLoad((e) => {
		if (e.item) {
			uni.setNavigationBarTitle({
				title: '编辑服务区域'
			})
			let val = JSON.parse(e.item)
			baseFormData.value = val
			addressValue.value = {
				"province": val.province, //省
				"city": val.city, //市
				"area": val.area, //区
				"town": val.town, //镇
			}
		} else {
			uni.setNavigationBarTitle({
				title: '新增服务区域'
			})
		}
	})
	// 保存
	const onSave = async () => {


		if (!addressRef.value.address.area) {
			uni.showToast({
				title: '请选择地址区域!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		baseFormData.value = {
			...baseFormData.value,
			...addressRef.value.address
		}
		uni.showLoading({
			mask: true,
			title: "加载中..."
		})
		await apiNetwork.saveNetworkArea(baseFormData.value).then(async res => {
			if (res.code == 20000) {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/pages_network/user/service_area'
					})
				}, 800)
			}
		})
		uni.hideLoading()
	}
	onMounted(() => {
		apiAddress.address().then(res => {
			if (res.code == 20000) {
				listData.value = res.data.rows
			}
		})
	})
	// 显示服务地区
	const showPicker = () => {
		treePicker.value._show()
	}
	// 服务区域
	const selectChange = (res) => {
		let serviceAreas = getAddressStringByCode(res);
		let str = serviceAreas.map(o => {
			let arr = Object.values(o)
			arr = arr.filter(function (item) {
				return item
			});
			return arr.join('/')
		})
		addressListStr.value = str.join()
	}
	// 根据编码数组获取对应地址
	function getAddressStringByCode(codes) {
		let result = [];
		let currentLevel = listData.value;
		for (let code of codes) {
			let str = {}
			currentLevel.find(item => {
				if (item.code == code) {
					str['province'] = item.name
					str['city'] = ''
					str['area'] = ''
					str['town'] = ''
					str['id'] = ''
				} else {
					item.children.find(item2 => {
						if (item2.code == code) {
							str['province'] = item.name
							str['city'] = item2.name
							str['area'] = ''
							str['town'] = ''
							str['id'] = ''
						} else {
							item2.children.find(item3 => {
								if (item3.code == code) {
									str['province'] = item.name
									str['city'] = item2.name
									str['area'] = item3.name
									str['town'] = ''
									str['id'] = ''
								} else {
									item3.children.find(item4 => {
										if (item4.code == code) {
											str['province'] = item.name
											str['city'] = item2.name
											str['area'] = item3.name
											str['town'] = item4.name
											str['id'] = ''
										}
									})
								}
							})
						}
					})
				}
			});
			result.push(str)
		}
		return result;
	}

</script>

<style lang="scss" scoped>
	:deep(.uni-modal__bd) {
		color: #F56C6C !important;
	}

	:deep(.uni-modal__btn_primary) {
		color: #F56C6C !important;
	}

	.mian {
		background-color: #f6f7fa;
		height: 100vh;

		:deep(.uni-forms-item__label) {
			font-size: 28rpx;
		}

		:deep(.uni-easyinput__content-input) {
			font-size: 28rpx;
		}



		.uni_form {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 10rpx 24rpx;
			margin: 24rpx;

			:deep(.uni-forms-item) {
				margin-bottom: 24rpx;

				.item_zip {
					display: flex;
					align-items: center;

				}
			}

			:deep(.is-input-border) {
				border: none;

				&.is-focused {

					.uniui-clear,
					.uniui-eye-filled {
						color: #007cff99 !important;
					}
				}
			}

		}

		.default {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 24rpx;

			.tip {
				font-size: 28rpx;
				color: #606266;
			}
		}

		.delete_adrs {
			background-color: #fff;
			border-radius: 20rpx;
			margin: 24rpx;
			padding: 24rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #F56C6C;
		}

		.btn_word {
			padding: 50rpx;
			position: fixed;
			bottom: 20rpx;
			left: 0;
			right: 0;
			z-index: 2;

			:deep(button:after) {
				border: none !important;
			}

			.btn_bor {
				// width: 50%;
				height: 80rpx;
				font-size: 28rpx;
				font-weight: bold;
				border-radius: 50rpx;
				background-color: #007cff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>